In this blog, I’m explaining how to use jquery fade in fade out method in our application.
Fade In Fade Out
Fade In and fade out methods works in 3 different styles:
- fadeIn(‘slow’) or fadeOut(‘slow’)
- fadeIn(‘fast’) of fadeout(‘fast’)
- fadeIn(Timespan) of fadeout(Timespan)
Note:- Timespan is an integer value and represents milliseconds. Example
In this example, first create an asp.net web application and div and button, we fade in and fade out the div along with its contents on button click.
Step 1:
First design the web page like this:
<form id="form1" runat="server">
<div>
<div style="min-height: 102px; height: 102px;">
<div id="divFadeInOut" style="width: 113px; height: 102px; background-color: Green;
border: 1px;">
This is the example of JQuery Fade In Fade Out(SLOW).
</div>
</div>
<input type="button" name="btnFade" value="Fade Out" id="btnFade" style="width: 81px;
position: fixed;"/>
</div>
</form>
Step 2:
Now add a file named “jquery-1.9.0.min.js” to your solution so that you can work on jquery and the below line in the head section of the web page.
<script src="jquery-1.9.0.min.js" type="text/javascript"></script>
Step 3:
Now write a method in the head section of web page like this :
<script language="javascript" type="text/javascript">
function fadeinorout() {
if ($('#btnFade').val() == "Fade In") {
$('#btnFade').val("Fade Out");
$('#divFadeInOut').fadeIn('slow');
}
else {
$('#btnFade').val("Fade In");
$('#divFadeInOut').fadeOut('slow');
}
}
</script>
btnFade – Id of button
divFadeInOut – Id of div
This method will fade in and fade out the div and also change the text of button on button’s click.
Step 4:
Now call the above method on button click like this:
<input type="button" name="btnFade" value="Fade Out" id="btnFade" style="width: 81px;
position: fixed;" onclick="fadeinorout();" />
Full Code
Here is the full code with all 3 forms of fadeIn() and fadeOut() methods:
<headrunat="server">
<title>JQUERY FADE IN FADE OUT</title>
<scriptsrc="jquery-1.9.0.min.js"type="text/javascript"></script>
<scriptlanguage="javascript"type="text/javascript">
function fadeinorout() {
if ($('#btnFade').val() == "Fade In") {
$('#btnFade').val("Fade Out");
$('#divFadeInOut').fadeIn('slow');
}
else {
$('#btnFade').val("Fade In");
$('#divFadeInOut').fadeOut('slow');
}
}
function fadeinoroutFAST() {
if ($('#btnFadeFast').val() == "Fade In") {
$('#btnFadeFast').val("Fade Out");
$('#divFadeInOrOutFAST').fadeIn('fast');
}
else {
$('#btnFadeFast').val("Fade In");
$('#divFadeInOrOutFAST').fadeOut('fast');
}
}
function fadeinoroutTimespan() {
if ($('#btnFadeTimespan').val() == "Fade In") {
$('#btnFadeTimespan').val("Fade Out");
$('#divFadeInOrOutTimespan').fadeIn(4000);
}
else {
$('#btnFadeTimespan').val("Fade In");
$('#divFadeInOrOutTimespan').fadeOut(4000);
}
}
</script>
</head>
<body>
<formid="form1"runat="server">
<div>
<divstyle="min-height: 102px; height: 102px;">
<divid="divFadeInOut"style="width: 113px; height: 102px; background-color: Green;
border: 1px;">
This is the example of JQuery Fade In Fade Out(SLOW).
</div>
</div>
<inputtype="button"name="btnFade"value="Fade Out"id="btnFade"style="width: 81px;
position: fixed;"onclick="fadeinorout();"/>
</div>
<div>
<divstyle="min-height: 102px; height: 102px;margin-top:110px;">
<divid="divFadeInOrOutFAST"style="width: 113px; height: 102px; background-color: Green;
border: 1px;">
This is the example of JQuery Fade In Fade Out(FAST).
</div>
</div>
<inputtype="button"name="btnFadeFast"value="Fade Out"id="btnFadeFast"style="width: 81px;
position: fixed;"onclick="fadeinoroutFAST();"/>
</div>
<div>
<divstyle="min-height: 102px; height: 102px;margin-top:120px;">
<divid="divFadeInOrOutTimespan"style="width: 113px; height: 102px; background-color: Green;
border: 1px;">
This is the example of JQuery Fade In Fade Out(TIMESPAN).
</div>
</div>
<inputtype="button"name="btnFadeTimespan"value="Fade Out"id="btnFadeTimespan"style="width: 81px;
position: fixed;"onclick="fadeinoroutTimespan();"/>
</div>
</form>
</body>
Leave Comment